<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="myCanvas" width="320" height="568"></canvas>
	</body>
	<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
	<script type="text/javascript" src="js/canvas.js"></script>
	<script type="text/javascript" src="js/loading.js"></script>
	<script type="text/javascript" src="js/bullet.js"></script>
	<script type="text/javascript" src="js/fly.js"></script>
	<script type="text/javascript" src="js/enemy.js"></script>
	<script type="text/javascript" src="js/gift.js"></script>
	<script type="text/javascript">
		//images是一个对象用来存储游戏中用到的图片的资源链接。注意图片的加载是一个异步加载的过程
		var images = {
			bgc: "img/background.png",
			fly: "img/herofly.png",
			enemy1: "img/enemy1.png",
			enemy2: "img/enemy2.png",
			enemy3: "img/enemy3.png",
			bullet1: "img/bullet1.png",
			bullet2: "img/bullet2.png",
			gift: "img/prop.png"
		};
		//执行loading操作，延迟游戏界面的加载，增强用户的体验度
		var loadImages, count = 0,
			count1 = 0,
			animate;
		loading(images, {
			success: function(imageObj) {
				loadImages = imageObj;

				function startDraw() {
					ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
					drawGameBack(); //绘制背景图
					drawHeroFly(); //绘制己方飞机

					if(!fly.adjustFECollision(enemys)) {
						if(fly.kind == 1) {
							fly.drawBullet(loadImages["bullet1"]); //绘制单排子弹
						} else if(fly.kind == 2) {
							fly.drawBullet(loadImages["bullet2"]); //绘制双排子弹
						}
						fly.moveBullets();
						if(fly.clear == false) {
							count++;
							fly.adjustBECollision(enemys);
							if(count % 50 == 0) {
								drawEnemyFly(); //绘制敌方飞机
							}
							moveEnemys();
							//进行礼品的绘制和移动
							if(count % 100 == 0) {
								drawGift();
								count = 0;
							}
						} else {
							count1++;
							if(count1 % 10 == 0) {
								count1 = 0;
								fly.clearScreen(enemys);
							}
							for(var i = 0; i < enemys.length; i++) {
								enemys[i].draw();
							}
						}

						moveGifts();
						//飞机和礼品做碰撞检测
						fly.adjustFGCollision(gifts);
					} else {
						fly.draw();
						for(var i = 0; i < enemys.length; i++) {
							enemys[i].draw();
						}
						count++;
						if(count%5 == 0) {
							if(boom()) {
								alert("Game Over");
								return;
							}
						}
					}
					window.requestAnimationFrame(startDraw);
				}
				startDraw();

				moveHeroFly(); //移动飞机
			}
		});
		//定义函数用来绘制游戏的背景图片
		var dy = 0; //记录下面的背景图片的偏移量
		function drawGameBack() {
			ctx.drawImage(loadImages["bgc"], 0, dy, myCanvas.width, myCanvas.height);
			ctx.drawImage(loadImages["bgc"], 0, dy - myCanvas.height, myCanvas.width, myCanvas.height);
			dy += 5;
			if(dy >= myCanvas.height) {
				dy = 0;
			}
		}
		//定义函数用来绘制己方飞机
		var fly = null; //存储己方飞机对象
		function drawHeroFly() {
			if(fly == null) {
				fly = new Fly(loadImages["fly"]);
			}
			fly.draw();
		}
		//定义函数完成飞机跟随用户手指移动
		function moveHeroFly() {
			$("#myCanvas").on("touchstart", function(e) {
				//在JQuery中获取移动端触摸事件中触摸点的坐标需要通过下面的操作获取。
				var touchObj = e.originalEvent.targetTouches[0];
				var pointX = touchObj.pageX - $("#myCanvas").offset().left;
				var pointY = touchObj.pageY - $("#myCanvas").offset().top;
				var disX = pointX - fly.x;
				var disY = pointY - fly.y;
				if(disX >= 0 && disX <= fly.w && disY >= 0 && disY <= fly.h) {
					//说明用户点击的是飞机的区域
					$(document).on("touchmove", function(e) {
						touchObj = e.originalEvent.targetTouches[0];
						pointX = touchObj.pageX - $("#myCanvas").offset().left;
						pointY = touchObj.pageY - $("#myCanvas").offset().top;
						fly.x = pointX - disX;
						fly.y = pointY - disY;
						//限定己方飞机的飞行区域
						if(fly.x <= 0) {
							fly.x = 0;
						} else if(fly.x >= myCanvas.width - fly.w) {
							fly.x = myCanvas.width - fly.w;
						}
						if(fly.y <= 0) {
							fly.y = 0;
						} else if(fly.y >= myCanvas.height - fly.h) {
							fly.y = myCanvas.height - fly.h;
						}
					});

					$(document).on("touchend", function() {
						$(document).off("touchmove");
					});
				}
			});
		}
		//定义函数完成敌机对象的绘制
		var enemys = []; //定义数组存储所有的敌机对象
		function drawEnemyFly() {
			var random = getRandom(0, 100);
			var enemy = null; //存储一个小飞机对象
			if(random <= 70) {
				enemy = new Enemy(1, loadImages["enemy1"]);
			} else if(random > 70 && random <= 80) {
				enemy = new Enemy(2, loadImages["enemy2"]);
			} else {
				enemy = new Enemy(3, loadImages["enemy3"]);
			}
			enemys.push(enemy);
		}
		//定义函数完成敌机的移动
		function moveEnemys() {
			for(var i = 0; i < enemys.length; i++) {
				enemys[i].move();
				if(enemys[i].y >= myCanvas.height) {
					enemys.splice(i, 1);
					i--;
				} else {
					enemys[i].draw();
				}
			}
		}
		//定义函数用来绘制对应的礼品对象
		var gifts = [];

		function drawGift() {
			var random = getRandom(0, 100);
			var kind = 0;
			if(random >= 20 && random <= 30) {
				kind = 2;
			} else if(random > 10 && random <= 15) {
				kind = 1;
			} else if(random == 5) {
				kind = 3;
			}
			if(kind != 0) {
				var gift = new Gift(loadImages["gift"], kind);
				gifts.push(gift);
			}
		}
		//定义函数用来进行对应礼品的移动
		function moveGifts() {
			for(var i = 0; i < gifts.length; i++) {
				gifts[i].move();
				if(gifts[i].y >= myCanvas.height) {
					gifts.splice(i, 1);
					i--;
				} else {
					gifts[i].draw();
				}
			}
		}

		//定义一个函数完成玩家飞机和敌机的自曝过程
		function boom() {
			fly.blood--;
			fly.positioX += fly.w;

			fly.collisionEenmy.blood--;
			fly.collisionEenmy.positionX += fly.collisionEenmy.w;
			if(fly.blood <= 0 && fly.collisionEenmy.blood <= 0) {
				return true;
			}
			return false;
		}
	</script>

</html>